<template>

    <h2>myDiagram.add 方式添加节点</h2>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 600px;">
    </div>
</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const init = () => {
        const $ = go.GraphObject.make

        let myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });
        var node1 =
            $(go.Node, "Auto",
                $(go.Shape,
                    {
                        figure: "RoundedRectangle",
                        fill: "lightblue"
                    }),
                $(go.TextBlock,
                    {

                        text: "Alpha",
                        margin: 5
                    })
            )
        myDiagram.add(node1);
        var node2 =
            $(go.Node, "Auto",
                $(go.Shape,
                    {
                        figure: "RoundedRectangle",
                        fill: "pink"
                    }),
                $(go.TextBlock,
                    {
                        text: "Beta",
                        margin: 15, font: 'bold 15pt sans-serif'
                    })
            );
        myDiagram.add(node2);
        myDiagram.add(
            $(go.Link,
                {fromNode: node1, toNode: node2},
                $(go.Shape)
            ));
    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>